import { useNavigate, useParams } from "react-router-dom";
import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import StarBorderOutlinedIcon from "@mui/icons-material/StarBorderOutlined";

import "./index.scss";

const NftDetail = () => {
  const navigate = useNavigate();

  //   const location = useLocation();
  //   const searchParams = new URLSearchParams(location.search);
  //   const id: any = searchParams.get("id");

  const { id } = useParams();
  const paramId: any = id;
  console.log(paramId);

  // 列表数据
  const listData = [] as any;

  for (let i = 1; i < 10; i++) {
    const ran = Math.floor(Math.random() * 2);
    listData.push({
      id: i,
      name: ran == 0 ? "算力收入" : "(赎回钻石)ZS",
      datetime: "2024-12-01  12:00",
      type: ran,
      power: Math.floor(Math.random() * 100),
    });
  }

  /**
   * 返回上一页
   */
  function handleGoBack() {
    navigate(-1); // 或者使用 history.go(-1)
  }

  return (
    <div className="nft-detail-container">
      <div className="nft-detail-inner">
        {/* banner */}
        <div className="banner-box">
          <img src="/images/dinosaur2.png" />
        </div>
        <div className="price-datetime">
          <div className="left-box">
            <div className="lowest">最低售价</div>
            <div className="current">
              <img src="/images/ton.png" />
              <span className="price">12,3213.00</span>
            </div>
          </div>
          <div className="right-box">
            <div className="attr-name">过期时间</div>
            <div className="attr-value">7天12时</div>
          </div>
        </div>
        {/* 详情内容 */}
        <div className="detail-content-box">
          <div className="star-box">
            <StarBorderOutlinedIcon />
          </div>
          {/* 卖家名称 */}
          <div className="seller-info">
            <div className="user-photo">
              <img className="" src="/images/user_photo.png" />
            </div>
            <span className="name">唐纳德·特朗普</span>
          </div>
          {/* 商品简介 */}
          <div className="intraduce">
            <div className="title">超级金属龙</div>
            <div className="content">
              银龙的个性并不凶暴，除非是面对极端邪恶或对它们无礼挑衅的敌人，否则不会轻易开战。它们在攻击之前，会使用“云雾术”来使对手看不见，还会使用“反重力”让敌人无助地飞到空中。
            </div>
          </div>
          {/* 历史记录 */}
          <div className="history-list-box">
            <div className="title">历史成交价</div>
            <div className="average-price">
              <span className="label-name">全部时间平均价格</span>
              <img src="/images/ton.png" />
              <span className="price">12,323.00</span>
            </div>
            {/* 列表 */}
            <div className="list-box">
              <ul>
                {listData.map((item: any) => (
                  <li key={item.id} className="item">
                    <div className="item-box">
                      <div className="seller-seller">
                        <div className="user-info">
                          <div className="user-photo">
                            <img src="/images/user_photo.png" />
                          </div>
                          <span className="name">用户A </span>
                        </div>
                        <ArrowForwardIcon />
                        <div className="user-info">
                          <div className="user-photo">
                            {" "}
                            <img src="/images/user_photo.png" />
                          </div>
                          <span className="name">用户B </span>
                        </div>
                      </div>
                      <div className="datetime-price">
                        <div className="datetime">2024-11-01 18:23</div>
                        <div className="price-box">
                          <span className="attr">成交价</span>
                          <span className="price">12,123.00</span>
                        </div>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* 返回 */}
      <div className="bottom-box">
        <div className="return-back-btn" onClick={handleGoBack}>
          <KeyboardBackspaceIcon />
          <span>返回</span>
        </div>
        {paramId % 2 == 0 ? (
          <div className="buy-btn">
            <span>购买</span>
          </div>
        ) : (
          <div className="remove-btn">
            <span>下架</span>
          </div>
        )}
      </div>
    </div>
  );
};

export default NftDetail;
